<template>
    <div>
        <router-link to="/films/nowplaying" custom v-slot="{navigate,isActive}">
                <li @click="navigate" ><span :class="isActive?'swqactive':'' ">正在热映</span></li>
        </router-link>
        <router-link to="/films/comingsoon" custom v-slot="{navigate,isActive}">
                <li @click="navigate" ><span :class="isActive?'swqactive':'' ">即将上映</span></li>
        </router-link>
    </div>
</template>
<style scoped>
    div{
        display: flex;
        width: 100%;
        height: 3.0625rem;
        z-index: 3;
    }
    li{
        flex: 1;
        height: 3.0625rem;
        line-height: 3.0625rem;
        text-align: center;
    }
    span{
        display: inline-block;
        height: 2.5rem;
    }
    .swqactive{
        color: red;
        border-bottom: 2px solid red;
    }
</style>
